<script lang="ts" setup>
import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
import 'vue-pdf-embed/dist/styles/annotationLayer.css'
import 'vue-pdf-embed/dist/styles/textLayer.css'

const props = defineProps({
  url: String,
  visible: {
    type: Boolean,
    default: false
  },
  remove: {
    type: Function, //传入createApp中移除节点的方法
    default: null
  }
})

const { doc } = useVuePdfEmbed({
  source: props.url
})

const show = ref(props.visible)
// 监听显示的消失，需要移除dom
watch(
  () => show.value,
  (val) => {
    if (!val) {
      doc.value?.destroy()
      props.remove()
    }
  }
)
</script>

<template>
  <el-dialog v-model="show" title="PDF预览" width="800">
    <VuePdfEmbed annotationLayer textLayer :source="doc" class="vue-pdf-embed" />
  </el-dialog>
</template>
